import { StatusBar } from 'expo-status-bar';
import { 
    StyleSheet, 
    Text, 
    View, 
    ScrollView,
    TouchableOpacity,
    FlatList,
    BackHandler,
    ToastAndroid
} from 'react-native';
import { useState, useEffect } from 'react';
// dayjs
const B = ({children,style,color,...rest})=>{
    return (
        <TouchableOpacity 
            {...rest}
            style={[
                {
                    justifyContent: 'center',
                    alignItems: 'center',
                    borderRadius: 10
                },
                style
            ]}
        >
            <Text style={{color: color?color:'#fff'}}>{children}</Text>
        </TouchableOpacity>
    )
}
const tagsData = [
    { label: '综合新闻', id: '' },
    { label: '新闻2', id: '2' },
    { label: '新闻3', id: '3' },
    { label: '新闻4', id: '4' },
    { label: '新闻5', id: '5' },
]
const baseURL = 'http://8.142.171.141:8080/school-news';
let time = 0;
export default function App() {
    const [selectTab,setSelectTab] = useState("");
    const [newsList,setNewsList] = useState([]);
    const [refreshing,setRefreshing] = useState(false);
    const [page,setPage] = useState(1);
    useEffect(()=>{
        BackHandler.addEventListener(
            'hardwareBackPress',
            ()=>{
                if(Date.now() - time > 2000){
                    time = Date.now();
                    ToastAndroid.show(
                        '确定要退出吗',
                        ToastAndroid.SHORT
                    )
                    return true
                }else{
                    BackHandler.exitApp();
                }
            }
        )
    },[])
    useEffect(()=>{
        fetch(`${baseURL}/draft/pageList?page=${page}&size=40`)
            .then(res=>res.json())
            .then(res=>{
                // console.log(res)
                setRefreshing(false);
                if(page==1){
                    setNewsList(res.data.content)
                }else{
                    setNewsList([...newsList,...res.data.content])
                }
            })
    },[page])
    const onEndReached = ()=>{
        setPage(page+1)
    }
    const onRefresh = ()=>{
        setRefreshing(true);
        setPage(1)
    }
    return (
        <View style={styles.layout}>
            {/* <ScrollView> */}
                <View style={styles.tabBtn}>
                    {
                        tagsData.map(tag=>(
                            <B
                                key={tag.id}
                                onPress={()=>setSelectTab(tag.id)}
                                style={{
                                    width: "18%",
                                    height: 30,
                                    backgroundColor: selectTab==tag.id?"#f00":'#aaa'
                                }}
                            >{tag.label}</B>
                        ))
                    }
                </View>
                {/* FlatList不能放在ScrollView */}
                {/* renderItem({ item, index, separators }); */}
                {/* (item: object, index: number) => string; */}
                <FlatList
                    data={newsList}
                    renderItem={({item})=><Text>{item.draftTitle}</Text>}
                    keyExtractor={(a)=>a.id}
                    onEndReached={onEndReached}
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                />
            {/* </ScrollView> */}
        </View>
    );
}

const styles = StyleSheet.create({
    tabBtn: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginVertical: 20
    },
    layout: {
        paddingTop: 30,
        flex: 1,
        backgroundColor: '#ccc'
    },
});

// axios
// expo install axios
// npm i yarn -g
